<template>
    <div>
        <div class="cb-list">
            <div class="cb-item" v-for="data in list" :key="data.menuFatherId" @click="jump(data.menuFatherId)">
                <img :src="data.menuFatherSrc" alt="">
                <h3>{{data.menuFatherName}}</h3>
                <p>{{nums(data.menuIds)}}道菜谱</p>
            </div>
        </div>
        <el-empty :image-size="200" v-if="list.length === 0"></el-empty>
        <div class="pageControl">
               <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="current_page"
                :page-size="12"
                layout="prev, pager, next"
                :hide-on-single-page="list.length < 12"
                :total="total">
              </el-pagination>
        </div>
    </div>
</template>

<script>
import cookie from '../../../../cookien'

export default {
  data () {
    return {
      list: [],
      current_page: 1,
      total: 0,
      loading: true
    }
  },
  computed: {
    nums (h) {
      return (h) => {
        if (h === '') {
          return 0
        } else {
          return h.split(',').length
        }
      }
    }
  },
  methods: {
    // 跳转
    jump (h) {
      this.$router.push({
        name: 'MenuListDetails',
        params: {
          id: h
        }
      })
    },
    getData () {
      console.log(this.$route.params.userId)
      this.$axios({
        method: 'get',
        url: '/Menu/Visitor/findCollectionByUserId',
        params: {
          userId: this.$route.params.userId,
          menuType: 1,
          pageNow: this.current_page,
          pageSize: 12
        },
        headers: {
          token: cookie.getToken()
        }
      }).then(data => {
        console.log(data)
        if (data.data.code === 200) {
          console.log(data.data.object)
          this.list = data.data.object.list
          this.loading = false
          this.total = data.data.object.total
        //   this.userInfo = data.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      this.current_page = val
      this.getData()
    }
  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang="less" scoped>
.cb-list{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,306px);
    place-content: space-around space-between;
    .cb-item{
      cursor: pointer;
        position: relative;
        width: 100%;
        height:172px;
        img{
            width: 100%;height: 100%;
            object-fit: cover;
            border-radius: 8px;
            position:absolute;
            top: 0;left: 0
        }
        h3{
            position:absolute;
            top: 50px;
            width: 298px;
            color: #fff;
            text-align: center;
            font-weight: 20px;
            left:50%;transform:translateX(-50%);
            text-shadow: 0 1px 2px rgb(0 0 0 0.5);
            text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
        }
        p{
            width: 298px;font-size: 16px;color: #FFF;
            text-shadow: 0 1px 2px rgba(0,0,0,0.28);
            text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
            position:absolute;
            text-align: center;
            top: 80px;left:50%;transform:translateX(-50%);
        }
    }
}
.pageControl{
  margin:30px 0;
  text-align: center !important;
}
</style>
